<template>
    <div class="tableBox" heigeht style="height: 250; width: 90%; position: relative; top: 20%; padding-top: 35%;">
    
    <el-button type="primary" @click="openWindow" :icon="Search" style="font-size: 16px; padding: 20px 16px; position: absolute;left: 1%;top: 1%;">添加器材</el-button>
    
    <input type="text" placeholder="请输入器材名" v-model="Name" style="position: absolute; right: 14%;top: 1%; height: 6%;width: 13%; padding-left: 1%;font-size:large;">
    <el-button type="success" @click="inquireByName" style="font-size: 16px; padding: 20px 16px; position: absolute;right: 10%;top: 1%;">查询</el-button>
    
    <div class="table" style="height: 850px;">
        <el-scrollbar style="width: 100%;">
          <el-table :data="tableData" style="width: 90%">
            <el-table-column fixed prop="id" label="ID" width="200" />
            <el-table-column prop="name" label="name" width="400" />
            <el-table-column prop="state" label="状态" width="200" />
            <el-table-column prop="photo" label="图片" width="600">
              <template #default="{row}">
                <img :src="row.photo" alt="图片" style="max-width: 50%; max-height: 50%;" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="Operations" width="200">
              <template #default="{row}" >
                <el-button link type="primary" size="small" @click="handleClick(row)">Delete</el-button>
                <el-button link type="primary" size="small" @click="editClick">Edit</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </div>
    </template>
    
    
    <script>
    // import { ref } from 'vue';
    import { ElTable, ElTableColumn,ElButton,ElScrollbar,ElMessageBox,ElMessage,} from 'element-plus'
    import axios from 'axios';
      export default{
        components:{
           ElTable,
           ElTableColumn,
            ElButton,
            ElScrollbar,
    
        },
    
    
        data(){
          return{
            tableData:[

                    ]
          }
        },
    

        mounted(){
            // console.log(this.$serverPort)
            this.inquire()
        },
    
        methods: {

          // 按照
          inquireByName(){
            if(this.Name != ''){
              axios.get("http://localhost:8082/sport/getSportByName",{
              params:{
                name:this.Name
              }
            }).then(res => {
              console.log(res.data.data)
              this.$data.tableData=[]
              this.$data.tableData[0]=res.data.data
            })
            }
            else{
              this.inquire()
            }
          },


          //添加器材信息
          openWindow() {
          ElMessageBox.prompt('请输入器材信息', '添加器材', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType: 'textarea', // 使用多行文本输入框
            inputValue: '',
            inputPlaceholder: '第一行输入器材名称，第二行输入状态，第三行输入图片 URL 地址',
            autosize: { minRows: 3 }, // 确保至少有三行输入空间
            inputValidator: (value) => {
              const lines = value.split('\n');
              if (lines.length !== 3) {
                return '请输入完整的三行信息';
              }
              const [name, state, url] = lines;
              if (!name || !state || !url) {
                return '每行信息不能为空';
              }
              return true;
            }
          }).then(({ value }) => {
            if (value) {
              // 提取每行的值
              const lines = value.split('\n');
              const name = lines[0].trim();
              const state = lines[1].trim();
              const url = lines[2].trim();

              // 将提取的值放入请求体中
              const postData = {
                name,
                state,
                photo: url
              };

              // 使用 axios 发送 POST 请求
              axios.post('您的后端接口URL', postData)
                .then(response => {
                  // 请求成功，处理响应数据
                  console.log('请求成功', response);
                  // 假设后端请求成功后会返回添加的数据
                  // 这里可以根据实际情况更新 tableData 或其他操作
                })
                .catch(error => {
                  // 请求失败，处理错误
                  console.error('请求失败', error);
                });
            }
          }).catch((error) => {
            console.log(error);
          });
        },
       
          //查询
          inquire(){
            axios.get("http://localhost:8082/sport/getAllSport")
            .then(res => {
              console.log(res.data.data)
              this.$data.tableData = res.data.data
            })
          },
    
          //编辑
          editClick() {
          ElMessageBox.prompt('请输入器材状态', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValidator: this.validateInput, // 假设这是您定义的验证函数
            inputPattern: /[\s\S]+/,
            inputValue: "正常",
            inputErrorMessage: '请输入有效的器材状态',
          }).then(({ value }) => {
            // 用户点击确定按钮后获取输入的器材信息
            if (value) {
              // 执行相应的逻辑操作，例如更新器材信息
              console.log('新的器材状态:', value);

              // 准备发送到后端的数据
              const updateData = {
                state: value
              };

              // 使用 axios 发送 POST 请求到后端接口
              axios.post('http://localhost:8082/sport/updataSport', updateData)
                .then(response => {
                  // 请求成功，处理响应数据
                  console.log('状态更新成功', response);
                  // 这里可以添加更新UI或状态的逻辑
                })
                .catch(error => {
                  // 请求失败，处理错误
                  console.error('状态更新失败', error);
                });
            }
          }).catch(error => {
            console.log(error);
          });
        },
    
          //删除
          handleClick(row){
                    ElMessageBox.confirm("确定删除?","提示",{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(()=>{
                        console.log(row.phone_num)
                        axios.post("http://localhost:8082/sport/DeleteById",{
                            property_name: "is_delete",
                            property_value: 1,
                            phone_num: row.phone_num
                        }).then(response=>{
                            this.getPageData()
                            console.log(response)
                            ElMessage({
                                message: '操作成功',
                                type: 'success',
                            })
                        }).catch(error=>{
                            console.log(error)
                        })
                    }).catch(error =>{
                        console.log(error)
                    })
                },
    
      }
      }
    
    </script>
    
    <style>
    
     </style>